<template>
  <div>
    <el-upload
      :drag="drag"
      :action="upLoadUrl"
      :list-type="listType"
      :limit="1"
      :file-list="filelist"
      :before-upload="beforeUploadFile"
      :on-remove="handleRemove"
      :on-success="submitOK"
      :on-preview="handlePictureCardPreview"
      ref="myFile"
    >
      <div v-if="!drag">
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
          <span class="el-upload-list__item-actions">
            <span
              v-if="fileType=='image'"
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
            >
              <i class="el-icon-zoom-in"></i>
            </span>
            <!-- <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
            <i class="el-icon-download"></i>
            </span>-->
            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </div>
      <div v-else>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>
<script>
import Common from "@/api/common";
import apiConfig from "@/utils/apiConfig";
import { imgTypeArr, videoTypeArr } from "@/utils/util";
import { Message } from "element-ui";
const { api } = apiConfig;

export default {
  props: {
    filelist: {
      type: Array
    },
    fileType: {
      type: String,
      default: ""
    },
    listType: {
      type: String
    },
    drag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      upLoadUrl: api["imgUpload"],
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      myFileList: [],
      isError: false
    };
  },
  methods: {
    submitOK(res, file, fileList) {
      if (this.isError) return;
      this.myFileList.push({
        name: res.content["name"],
        url: res.content["url"]
      });
      console.log(this.myFileList);
      this.$emit("fileListChange", this.myFileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    beforeUploadFile(file) {
      let _fileType = this.fileType.toLowerCase();
      this.isError = false;
      switch (_fileType) {
        case "image":
          imgTypeArr.indexOf(file.type) < 0 ? (this.isError = true) : null;
          break;
        case "video":
          videoTypeArr.indexOf(file.type) < 0 ? (this.isError = true) : null;
          break;
        default:
          break;
      }
      if (this.isError) {
        this.$message({
          message: "请上传正确格式的文件！",
          type: "error"
        });
        let fileList = this.$refs.myFile.uploadFiles,
          index = fileList.findIndex(item => {
            return item.uid === file.uid;
          });
        fileList.splice(index, 1);
        return;
      }
    },
    async handleRemove(file) {
      let name =
        file.response && file.response.content["name"]
          ? file.response.content["name"]
          : file.name;
      let fileList = this.$refs.myFile.uploadFiles;
      // let result = await Common.delUpLoadImg({ delFileName: name });
      let index = fileList.findIndex(item => {
        return item.uid === file.uid;
      });
      fileList.splice(index, 1);
      console.log("ssss", fileList);
      this.myFileList.splice(index, 1);
      this.$emit("fileListChange", []);
    }
  }
};
</script>
<style lang='scss' scoped>
</style>